<html>
<head>
<title>Demo</title>
<style type="text/css">
/* hide from incapable browsers */
div#scrollbar { 
    display:none;
    }

/* below in external file */
div#wn	{ 
    position:relative; 
    width:184px; height:52px; 
    overflow:hidden;	
	}
div#scrollbar { 
    position:relative; 
    width:184px; height:11px;
    display:block; /* display:none initially */
    font-size:1px;  /* so no gap or misplacement due to image vertical alignment */
  }

div#track { 
    position:absolute; left:12px; top:0;
    width:160px; height:11px; 
    background: #336;
  }
div#dragBar {
    position:absolute; left:1px; top:1px;
    width:20px; height:9px; 
    background-color:#ceced6;
  }  
div#left { position:absolute; left:0; top:0; }  
div#right { position:absolute; right:0; top:0;  }

/* for safari, to prevent selection problem  */
div#scrollbar, div#track, div#dragBar, div#left, div#right {
    -moz-user-select: none;
    -khtml-user-select: none;
}

/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div#scrollbar img {
    display:block; 
    } 

</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/dw_scrollbar.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">

function init_dw_Scroll() {
    var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
    wndo.setUpScrollbar("dragBar", "track", "h", 1, 1);
    wndo.setUpScrollControls('scrollbar');
}

// if code supported, link in the style sheet and call the init function onload
if ( dw_scrollObj.isSupported() ) {
    //dw_writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}

</script>
</head>
<body>

<div id="wn">
    <div id="lyr1">
    <table id="t1" border="0" cellpadding="0" cellspacing="6">
        <tr>
            <td><img src="images/demo/dwc-w-btn.gif" width="175" height="40" alt="" /></td>
            <td><img src="images/demo/dot-com-btn.gif" width="176" height="30" alt="" /></td>
            <td><img src="images/demo/slogan-btn.gif" width="132" height="32" alt="" /></td>
            <td><img src="images/demo/dwc-w-btn.gif" width="175" height="40" alt="" /></td>
            <td><img src="images/demo/dot-com-btn.gif" width="176" height="30" alt="" /></td>
            <td><img src="images/demo/slogan-btn.gif" width="132" height="32" alt="" /></td>
        </tr>
    </table>
    </div>
</div>  <!-- end wn div -->

<!-- border attribute added to reduce support questions on the subject. 
    If you like valid strict markup, remove and place a img {border:none;} spec in style sheet -->
<div id="scrollbar">
    <div id="left"><a class="mouseover_left" href="#"><img src="images/btn-lft.gif" width="11" height="11" alt="" border="0" /></a></div>
    <div id="track">
         <div id="dragBar"></div>
    </div>
    <div id="right"><a class="mouseover_right" href="#"><img src="images/btn-rt.gif" width="11" height="11" alt="" border="0" /></a></div>
  </div>
  

<p>Back to <a href="index.html">index</a></p>

</body>
</html>
